<template>
  <div class="container">
    <a
      :href="'/#/Detail/'+item.id"
      class="proguct-list"
      v-for="(item,index) in productitem"
      :key="index"
      @click="gotoDetail()"
    >
      <div class="proguct-img">
        <img :src="item.mainImage" alt />
      </div>
      <div class="proguct-name">{{item.subtitle}}</div>
      <div class="proguct-price">
        <span class="price">￥{{item.price}}</span>
        <span>活动类似</span>
      </div>
    </a>
  </div>
</template>
<script>
export default {
  name: "productlist",
  components: {},
  computed: {},
  data() {
    return {
      productitem: [
        {
          id: 0,
          name: "套装/短袖夏季速干运动服套装男士T恤短袖短裤休闲套装一套衣服男",
          price: 1299,
          activity: "减价",
          img:
            "https://t00img.yangkeduo.com/goods/images/2020-04-27/9fdc38c917a5fe4c2a36cc53f3148890.jpeg?imageMogr2/strip%7CimageView2/2/w/600/q/80"
        },
        {
          id: 1,
          name: "套装/短袖夏季速干运动服套装男士T恤短袖短裤休闲套装一套衣服男",
          price: 1299,
          activity: "减价",
          img:
            "https://t00img.yangkeduo.com/goods/images/2020-04-29/53cb582cfd128d0b1f48c1f5415bf344.jpeg?imageMogr2/sharpen/50/strip%7CimageView2/2/w/400/q/80/format/webp"
        },
        {
          id: 2,
          name: "套装/短袖夏季速干运动服套装男士T恤短袖短裤休闲套装一套衣服男",
          price: 1299,
          activity: "减价",
          img:
            "https://t00img.yangkeduo.com/goods/images/2020-02-19/93ad6017e1ed7f25b1d5cb644f36cfdd.jpeg?imageMogr2/sharpen/50/strip%7CimageView2/2/w/400/q/80/format/webp"
        },
        {
          id: 3,
          name: "南极人男士休闲裤夏季薄款宽松直筒冰丝空调男裤韩版潮流长裤子男",
          price: 1299,
          activity: "减价",
          img:
            "https://t00img.yangkeduo.com/goods/images/2020-03-24/911665cac8b713a504409286052b7bbe.jpeg?imageMogr2/sharpen/50/strip%7CimageView2/2/w/400/q/80/format/webp"
        }
      ]
    };
  },
  mounted() {
    this.getProductList();
  },
  methods: {
    getProductList() {
      this.axios.get("/products", {
          params: {
            categoryId: "100012",
            pageSize: 6
          }
        }).then(res => {
          this.productitem = res.list;
          console.log(res);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 2vw 2vh 2vw;
  box-sizing: border-box;
  background: #eee;
  font-size: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .proguct-list {
    width: 46vw;
    background-color: #fff;
    border-radius: 0.8rem;
    margin-top: 1vh;
    .proguct-img {
      img {
        width: 46vw;
        border-radius: 0.8rem 0.8rem 0 0;
      }
    }
    .proguct-name {
      width: 44vw;
      text-align: center;
      padding: 0 1vw;
      box-sizing: border-box;
      line-height: 4vh;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 1vw;
      color: #666;
    }
    .proguct-price {
      width: 46vw;
      text-align: center;
      line-height: 4vh;
      color: #666;

      span {
        display: inline-block;
        width: 22vw;
      }
      .price {
        color: #f20;
      }
    }
  }
}
</style>
